<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue">
        <div class="order-line"></div>
        <div class="bg-f aui-padded-t-5">
            <ul class="order-list">
                <li>
                    <div class="order-left">发货地址</div>
                    <div class="order-right">
                        <p>{{order.orderInfo.sender_address}}{{order.orderInfo.sender_sub_address}}</p>
                        <p>{{order.orderInfo.sender}} {{order.orderInfo.sender_phone}}</p>
                    </div>
                </li>
                <li>
                    <div class="order-left">收货地址</div>
                    <div class="order-right">
                        <p>{{order.orderInfo.consignee_address}}{{order.orderInfo.consignee_sub_address}}</p>
                        <p>{{order.orderInfo.consignee}} {{order.orderInfo.consignee_phone}}</p>
                    </div>
                </li>
                <li>
                    <div class="order-left">取货时间</div>
                    <div class="order-right">{{order.orderInfo.get_goods_time}} </div>
                </li>
                <li>
                    <div class="order-left">物品类型</div>
                    <div class="order-right">{{order.orderInfo.goods_type}}<span class="aui-margin-5">/</span>{{order.orderInfo.goods_value}}<span class="aui-margin-5">/</span>{{order.orderInfo.goods_weight}}公斤<span class="aui-margin-5">/</span>{{order.orderInfo.vehicle}}</div>
                </li>
                <li>
                    <div class="order-left">物品照片</div>
                    <div class="order-right">
                        <img :src="item" v-for="(item,index) in order.orderInfo.goodsPicsThumb" @click="showBig(index,order.orderInfo.goodsPicsThumb)">
                    </div>
                </li>
            </ul>
        </div>
        <ul class="aui-list aui-list-in aui-margin-t-15 deliv-time good-list bor-no">
            <li class="aui-list-item aui-list-item-arrow" @click="openFeeDesc">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">跑腿费</div>
                    <span class="deliv-price4">
                      <a href="javascript:void(0);" class="aui-iconfont aui-icon-question aui-margin-r-5"></a>
                      ￥{{order.order_fee}}
                    </span>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-arrow" v-if="!submitPayLock">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">加小费</div>
                    <div class="aui-list-item-right">
                        <input type="number" placeholder="小费到位，服务当然更到位" v-model="form.bonus_fee" onfocus="this.value=''">
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-arrow" v-if="coupons.length>0 && !submitPayLock">
                <a href="javascript:;" class="aui-list-item-inner bor-bn">
                    <div class="aui-list-item-title">优惠券</div>
                    <select class="aui-list-item-right" v-model="form.coupon_id">
                      <option value="0">请选择</option>
                      <option v-for="item in coupons" :value="item.id">{{item.name}}</option>
                    </select>
                </a>
            </li>
        </ul>
        <ul class="aui-list aui-list-in aui-margin-t-15 deliv-time good-list bor-no">
            <li class="aui-list-item">
                <div class="aui-list-item-inner bor-bn">
                    <div class="aui-list-item-title">备注说明</div>
                    <div class="aui-list-item-right">
                        <input type="text" placeholder="请填写备注，如易碎品，勿摔" v-model="form.remark">
                    </div>
                </div>
            </li>
        </ul>
        <div class="hei4"></div>
        <!--底部支付-->
        <div class="pay-b">
            <div class="pay-text1">距离{{order.distance}}公里，{{order.estimated_time}}。</div>
            <div class="pay-text2">￥{{order.pay_amount}}</div>
            <a href="javascript:void(0);" class="aui-btn aui-btn-info pay-btn" @click="openPayList">去支付</a></div>
        <div id="loading" @click="closePayList"></div>

        <!--支付方式-->
        <div class="pay-type" id="pay-type">
            <div class="pay-t2">请选择支付方式</div>
            <div class="pay-radio">
                <!-- <label>
              <img src="../images/wx.png"> 余额支付
              <input class="aui-radio" type="radio" name="pay_method" value="余额" checked="" v-model="form.pay_method">
            </label> -->
                <label>
              <img src="../images/wx.png"> 微信
              <input class="aui-radio" type="radio" name="pay_method" value="微信" v-model="form.pay_method">
            </label>
                <label>
              <img src="../images/zfb.png">支付宝
              <input class="aui-radio" type="radio" name="pay_method" value="支付宝" v-model="form.pay_method">
            </label>
            </div>
            <input class="aui-btn aui-btn-info aui-btn-block pay-btn2" type="submit" value="确认支付" @click="submitPay">
            <a href="javascript:void(0);" class="aui-iconfont aui-icon-close" id="pay-close2" @click="closePayList"></a>
        </div>
    </div>

    <script type="text/javascript" src="../script/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script>
        apiready = function() {
            api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#eee',
                textColor: '#333',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                getOrderData(function() {
                    api.refreshHeaderLoadDone();
                });
            });

            var photoBrowser = api.require('photoBrowser');
            vObj = new Vue({
                el: ".vue",
                data: {
                    submitPayLock: false,
                    form: {
                        order_id: api.pageParam.order_id,
                        pay_method: '微信',
                        bonus_fee: '',
                        coupon_id: 0,
                        remark: ''
                    },
                    coupons: [],
                    order: {
                        order_fee: 0,
                        pay_amount: 0,
                        distance: 0,
                        estimated_time: '',
                        orderInfo: {
                            get_goods_time: '',
                            sender: '',
                            sender_phone: '',
                            sender_address: '',
                            sender_sub_address: '',
                            consignee: '',
                            consignee_phone: '',
                            consignee_address: '',
                            consignee_sub_address: '',
                            goods_type: '',
                            goods_value: '',
                            goods_weight: '',
                            goods_pics: [],
                            vehicle: ''
                        }
                    }
                },
                methods: {
                    openFeeDesc: function() {
                        api.showProgress({
                            title: '正在读取',
                            text: '请稍候...',
                            modal: true
                        });
                        api.openFrame({
                            name: 'count_fee_desc',
                            url: app.app_host + 'Common/articleDetail?close=1&id=9',
                            rect: {
                                x: 0,
                                y: api.pageParam.statusBarPos.h + api.pageParam.headerPos.h,
                                w: 'auto',
                                h: 'auto'
                            },
                            bgColor: '#eee',
                            bounces: true,
                            animation: {
                                type: 'push',
                                subType: 'from_bottom'
                            }
                        });
                        api.hideProgress();
                    },
                    closeFeeDesc: function() {
                        $("#pay-sum").removeClass("active");
                    },
                    openPayList: function() {
                        $("#pay-type").addClass("active");
                        $("#loading").addClass("active");
                    },
                    closePayList: function() {
                        $("#pay-type").removeClass("active");
                        $("#loading").removeClass("active");
                    },
                    showBig: function(index, items) {
                        photoBrowser.open({
                            images: items,
                            activeIndex: index,
                            placeholderImg: 'widget://res/img/apicloud.png',
                            bgColor: '#000'
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.eventType == "click") {
                                    photoBrowser.close();
                                }
                            } else {
                                app.error(JSON.stringify(err));
                            }
                        });
                    },
                    submitPay: function() {
                        api.showProgress({
                            title: '正在发起支付...',
                            text: '请稍候...',
                            modal: false
                        });
                        app.request.post('Client/payCityOrder', this.form, {}, function(res) {
                            // console.log(JSON.stringify(res));
                            // return;
                            if (res.code == 200) {
                                vObj.submitPayLock = true;
                                switch (vObj.form.pay_method) {
                                    case '微信':
                                        app.wxpay(res.data.wxpay, vObj.order, 'city');
                                        break;
                                    case '支付宝':
                                        // console.log(res.data.alipay);return;
                                        app.alipay(res.data.alipay, vObj.order, 'city');
                                        break;
                                }
                            } else {
                                app.error(res.message);
                            }
                            api.hideProgress();
                        });
                    }
                },
                watch: {
                    form: {
                        handler: function(val, oldVal) {
                            if (val.bonus_fee < 0 || val.bonus_fee == '') {
                                val.bonus_fee = 0;
                            }

                            var coupon_amount = 0;
                            if (val.coupon_id > 0) {
                                for (var i = 0; i < vObj.coupons.length; i++) {
                                    if (vObj.coupons[i].id == val.coupon_id) {
                                        coupon_amount = vObj.coupons[i].amount;
                                    }
                                }
                            }
                            vObj.order.pay_amount = parseFloat(vObj.order.order_fee) + parseFloat(val.bonus_fee) - parseFloat(coupon_amount);
                        },
                        deep: true
                    }
                }
            });
            getOrderData();

            function getOrderData(callback) {
                app.request.post('Client/cityOrder', {
                    order_id: api.pageParam.order_id
                }, {}, function(res) {
                    // console.log(JSON.stringify(res))
                    if (res.code == 200) {
                        app.request.post('Client/availableCoupon', {
                            amount: res.data.order_fee
                        }, {}, function(coupons) {
                            if (res.code == 200) {
                                vObj.coupons = coupons.data;
                            }
                        });
                        vObj.order = res.data;
                        app.request.finish(vObj);
                    } else {
                        if (res.message == 'login') {
                            setTimeout(function() {
                                app.toLogin();
                            }, 300)
                        } else {
                            app.error(res.message);
                        }
                    }
                    callback && callback();
                });
            }

            app.addEventListener('loginSuccess', function(ret, err) {
                getOrderData();
            });
        }
    </script>
</body>

</html>
